import React from 'react'
import { connect } from 'react-redux'
import { handerAction } from './store'
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    SearchInput,
    SearchHistroy,
    SearchHistroyItem
} from './style'

function handlerSearch(show) {
    if(show){
        return (
            <SearchHistroy className="show">
                <SearchHistroyItem href="/">React</SearchHistroyItem>
                <SearchHistroyItem href="/">JavaScript</SearchHistroyItem>
                <SearchHistroyItem href="/">Vue</SearchHistroyItem>
                <SearchHistroyItem href="/">Css</SearchHistroyItem>
                <SearchHistroyItem href="/">transition</SearchHistroyItem>
            </SearchHistroy>
        )
    }
}

const Header = (props) => {
    return (
        <HeaderWrapper>
            <Nav>
                <NavItem><Logo /></NavItem>
                <NavItem className="tab">首页</NavItem>
                <NavItem className="tab active">下载App</NavItem>
                <NavItem className="fill-1">
                    <SearchWrapper>
                        <SearchInput onFocus={props.showHistory} onBlur={props.hiddenHistory}></SearchInput>
                        <i className="iconfont iconfangdajing"></i>
                        {
                            handlerSearch(props.focused)
                        }
                    </SearchWrapper>
                </NavItem>
                <NavItem className="text-btn">
                    <i className="iconfont iconAa"></i>
                </NavItem>
                <NavItem className="text-btn">登录</NavItem>
                <NavItem className="btn">注册</NavItem>
                <NavItem className="btn write-btn">
                    <i className="iconfont iconPensyumaobi"></i>
                      写文章
                    </NavItem>
            </Nav>
        </HeaderWrapper>
    )
}

const mapStateToProps = (state) => {
    return {
        focused: state.getIn(['hander','focused'])
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        showHistory() {
            dispatch(handerAction.historyShow())
        },
        hiddenHistory() {
            dispatch(handerAction.historyHidden())
        }
    }
}


export default connect(mapStateToProps, mapDispatchToProps)(Header)